<template>
   <div class="content">
       <div class="search">
         <input type="text" v-model="keyword" class="search-input" placeholder="输入城市名或拼音">
        </div>
       <div class="search-content" ref="searchContent" v-show="keyword">
            <ul>
              <li class="search-item border-bottom" v-for="item of list" :key="item.id">{{item.name}}</li>
              <li class="search-item border-bottom" v-show="hasList">
                没有搜索到相应城市
              </li>
            </ul>
       </div>
   </div>

</template>


<script>
import Bscroll from 'better-scroll'
export default {
  name:"CitySearch",
  data () {
    return {
      keyword:"",
      list:[],
      timer:null
    }
  },
  computed :{
    hasList () {
      return !this.list.length
    }
  },
  props:{
    cities:Object
  },
  watch :{
    keyword () {
       //用timer做一个延时函数，因为这个keyword的改变是实时监听的
       //这样比较消耗性能，我们用timer做一个延时执行就好了
       if(this.timer) {
         clearTimeout(this.timer)
       }
       if(!this.keyword){
         this.list = []
         return
       }
       this.timer = setTimeout (() => {
          const result = []
          for(let i in this.cities){
            this.cities[i].forEach(value => {
               if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){
                 result.push(value)
               }
               this.list = result
            });
          }
       },100)//延迟100毫秒执行


    }
  },
  mounted () {
     //Bscroll的作用就是用来做滚动的
     this.scroll = new Bscroll(this.$refs.searchContent)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl';
 .search
   height :.72rem
   padding :0.1rem
   background :$bgColor
   .search-input
      box-sizing border-box
      width :100%
      height .62rem
      padding 0 .1rem
      line-height .62rem
      text-align center
      border-radius .06rem
      color #666
 .search-content
    z-index :1
    overflow :hidden
    position:absolute
    top:1.58rem
    left:0
    right:0
    bottom:0
    background-color :#eee
    .search-item
       line-height :.62rem
       padding-left :.2rem
       color :#666
       background-color :#fff
</style>
